<template>
	<view class='containView'>
		<!-- <view class="carousel">
			<swiper indicator-dots circular=true duration="400" class='car_swiper'>
				<swiper-item class="swiper-item" v-for="(item,index) in imgList" :key="index">
					<view class="image-wrapper">
					<image :src="item.src" class="loaded"  mode="aspectFill" ></image> 
					</view>
				</swiper-item>
			</swiper>
		</view> -->

		<view class="commodityPic">
			<image class="commodityPic_img" :src="goodImg" mode="scaleToFill"></image>
		</view>

		<view class="commodity">
			<view class="commodity_price">
				<text class="DW_commodity_price">￥</text>
				<text class="JG_commodity_price">{{price}}</text>
			</view>
			<view class="commodity_title">{{goodName}}</view>
			<view class="commodity_SalesVolume">
				<text>销量：</text>
				<text>{{sellNum}}</text>
			</view>
		</view>
		
		<view class='commodityDetails'>
			<view class='title_Details'>商品详情</view>
			<view class='detailImg' v-if="type=='S33'">
				<view class='img_goods'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_02.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_04.jpg'>
					<image class='image3' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_07.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_09.jpg'>
					<image class='image2' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_11.jpg'>
					<image class='image4' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_13.jpg'>	
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_16.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_18.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_21.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_23.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_28.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_31.jpg'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/bodyCar_33.png'>
				</view>
			</view>
			<view class='detailImg' v-if="type=='C5L'">
				<view class='img_goods'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_01.png'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_02.png'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_06.png'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_08.png'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_10.png'>
					<image class='image4' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_11.png'>
					<image class='image4' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_13.png'>	
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_14.png'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_17.png'>
					<image class='image2' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_18.png'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_21.png'>
					<image class='image2' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_22.png'>
					<image class='image1' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_23.png'>
					<image class='image2' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_28.png'>
					<image class='image2' src='https://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/goods/C5L/bodyCar2_30.png'>
				</view>
			</view>
		</view>

		<view class="purchase">
			<view class="btn_purchase" @tap="enterOrderConfirm()">立即购买</view>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	export default {
		components: {},
		data() {
			return {
				goodId: '',
				goodImg: '',
				goodName: '',
				price: '',
				sellNum: '',
				storeId: '',
				type: '',
				infos: [],
				apiUrl: config.apiHost,
				imgUrl: config.ImageUrl,
				address: false
			};
		},
		onLoad(option) {
			console.log(option)
			if (option.address) {
				this.address = 1
			}
			this.goodId = option.goodId;
		},
		onShow() {
			this.getGoodInfos();
		},
		methods: {
			enterOrderConfirm() {
				let self = this
				uni.request({
					url: self.apiUrl + '/api/goods/updateSalesVolume',
					method: 'GET',
					contentType: 'application/jason',
					data: {
						goodsId: self.goodId,
						storeId: self.infos.storeId
					},
					success: res => {
						self.infos.goodImg = encodeURIComponent(self.infos.goodImg)
						if (res.data.code == 200) {
							uni.navigateTo({
								url: '../order/orderConfirm?infos=' + JSON.stringify(self.infos) + '&address=' + self.address
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: '购买失败'
							})
						}
					}
				});

			},
			getGoodInfos() {
				uni.request({
					url: this.apiUrl + '/api/goods/selectGoodsById',
					method: 'GET',
					contentType: 'application/jason',
					data: {
						goodsId: this.goodId
					},
					success: res => {
						console.log(res);
						if (res.data.code == 200) {
							this.infos = res.data.data
							this.goodImg = res.data.data.goodImg;
							this.goodName = res.data.data.goodName;
							this.price = res.data.data.price;
							this.sellNum = res.data.data.sellNum;
							this.storeId = res.data.data.storeId;
							this.type = res.data.data.type;
							console.log(res.data.data.type);
						}
					}
				});
			}
		}
	};
</script>

<style>
	.containView{
		width:100%;
		height:auto;
		margin-bottom:60px;
	}
	.carousel {
		height: 866upx;
		position: relative;
	}

	.car_swiper {
		height: 100%;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}
	.commodityDetails{
		width:100%;
		height:auto;
		float:left;
		margin-top:10px;
		margin:3% 0;
		background:#fff;
	}

	.loaded {
		height: 100%;
		width: 100%;
	}

	.commodity {
		width: 100%;
		height: auto;
		float: left;
		background: #fff;
	}

	.commodityPic {
		width: 100%;
		height: 432px;
		float: left;
		background-color: #FFF;
	}
	.title_Details{
		width:94%;
		height:15px;
		font-size:1.1em;
		line-height:15px;
		float:left;
		margin:5% 3%;
		border-left:#FB7838 solid 5px;
	}
	.detailImg{
		width:100%;
		height:auto;
		float:left;
	}
	
	.img_goods{
		width:100%;
		min-height:200px;
		float:left;
		
	}
   .image1{
	   width:100%;
	   height:1100upx;
	   float:left;
   }
   .image2{
	   width:100%;
	   height:800upx;
	   float:left; 
   }
   .image3{
	  width:100%;
	  height:600upx;
	  float:left; 
   }
   .image4{
	  width:100%;
	  height:1600upx;
	  float:left;  
   }
	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750upx;
		overflow: hidden;


	}

	.swiper-item image {
		width: 100%;
		height: 100%;
	}

	.commodityPic_img {
		width: 100%;
		height: 100%;
		float: left;
	}

	.commodity {
		width: 100%;
		height: auto;
		float: left;
	}

	.commodity_price {
		width: 100%;
		height: 40px;
		line-height: 40px;
		float: left;
		padding-left: 3%;
		color: #ff4000;
	}

	.DW_commodity_price {
		font-size: 0.9em;
	}

	.JG_commodity_price {
		font-size: 1.25em;
		font-weight: 600;
	}

	.commodity_title {
		width: 94%;
		line-height: 22px;
		margin-left: 3%;
		font-size: 1em;
		font-weight: 600;
		color: #222;
	}

	.commodity_SalesVolume {
		width: 94%;
		height: 30px;
		line-height: 30px;
		float: left;
		font-size: 0.8em;
		color: #9c9c9c;
		padding: 0 3% 0 3%;
	}

	.commodityDetails {
		width: 100%;
		height: auto;
		float: left;
	}

	.title_commodityDetails {
		width: 94%;
		height: 30px;
		line-height: 30px;
		float: left;
	}

	.purchase {
		height: 56px;
		width: 100%;
		position: fixed;
		bottom: 0px;
		left: 0px;
		background: #fff;
		box-shadow: 0 1px 5px #ccc;
	}

	.btn_purchase {
		width: 90%;
		height: 46px;
		float: left;
		margin-top: 5px;
		background: #fe8435;
		border-radius: 20px;
		margin-left: 5%;
		text-align: center;
		line-height: 46px;
		color: #fff;
	}
</style>
